import { View } from "@tarojs/components";
import { ArrowLeft } from "@taroify/icons";
import Taro from "@tarojs/taro";

interface PropsType {
  align?: "center" | "right" | "left";
  menus?: Array<{ id: string | number; label: string }>;
  select?: string | number;
  change?: (id: string | number) => void; // 点击菜单项的回调函数
}

export default ({
  select = "2",
  align = "center",
  menus = [
    { id: "1", label: "关注" },
    { id: "2", label: "推荐" },
  ],
  change,
}: PropsType) => {
  return (
    <View className="flex justify-between items-center px-2">
      <View>
        <ArrowLeft size="26" onClick={() => Taro.navigateBack()} />
      </View>
      <View className="flex gap-5">
        {menus.map((menu) => (
          <View
            onClick={() => {
              if (change) change(menu.id);
            }}
            key={menu.id}
            className={`${
              select == menu.id ? "font-bold" : ""
            } flex flex-col justify-end items-center gap-1`}
          >
            <View>{menu.label}</View>
            {select == menu.id ? (
              <View className="h-1 w-4 rounded-full bg-white"></View>
            ) : (
              <View className="h-1"></View>
            )}
          </View>
        ))}
      </View>
      <View></View>
    </View>
  );
};
